<template>
	<div class="ChooseBox mask">
		<div class="dialog">
			<div class="header">
				<div class="title">选择宝箱</div>
				<div class="close" @click="onDialogClose">
					<img class="icon" src="@/static/img/battle/ChooseBox/close.png" />
				</div>
			</div>
			<div class="filter">
				<input class="input search-name" placeholder="搜索名称" />
				<input class="input dropdown" placeholder="全部类型" />
				<input class="input dropdown" placeholder="全部金额" />
				<input class="input dropdown" placeholder="价格从高到低" />
			</div>
			<div class="body">
				<OverlayScrollbarsComponent style="height: 390px">
					<div class="boxes">
						<div class="box" v-for="(box, index) in boxes" :key="index" :class="{ active: box.count > 0 }">
							<img class="img" :src="processImageUrl(box.img)" @click="btnBoxDetailClick(box)" />

							<span class="title">{{ box.name }}</span>
							<div class="price">
								<img class="price-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
								<span class="price-value">{{ box.price }}</span>
							</div>

							<div class="number" v-if="box.count == 0">
								<div class="change" @click="changeBoxItemCount(box, 1)">添加</div>
							</div>
							<div class="number" v-else>
								<div class="operator sub" @click="changeBoxItemCount(box, -1)"><img src="@/static/img/battle/createBattle/box-count+sub.png" /></div>
								<div class="value">{{ box.count }}</div>
								<div class="operator add" @click="changeBoxItemCount(box, 1)"><img src="@/static/img/battle/createBattle/box-count+add.png" /></div>
							</div>
						</div>
					</div>
				</OverlayScrollbarsComponent>
			</div>
			<div class="footer">
				<div class="total">
					<img class="icon" src="@/static/img/battle/createBattle/icon_coin.png" />
					<span class="value"> {{ staticsPrice() }}</span>
				</div>
				<div>
					<div class="btnSubmit" @click="btnSubmit">添加箱子</div>
				</div>
			</div>
		</div>
	</div>
	<box-detail v-if="selectedBox != null" @close="selectedBox = null" :box="selectedBox"></box-detail>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, computed } from 'vue';
import { processImageUrl } from '@/utils';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

import BoxDetail from './BoxDetail.vue';

export default defineComponent({
	setup(props, { emit }) {
		// 创建一个响应式状态对象
		const state = reactive({
			loading: false,
			boxes: [
				{
					id: 1,
					name: '宝箱1',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 2,
					name: '宝箱2',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 3,
					name: '宝箱3',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 4,
					name: '宝箱4',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 5,
					name: '宝箱5',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 6,
					name: '宝箱6',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 7,
					name: '宝箱7',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 8,
					name: '宝箱8',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 9,
					name: '宝箱9',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 10,
					name: '宝箱10',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 11,
					name: '宝箱11',
					price: 120.01,
					img: '',
					count: 0
				},
				{
					id: 12,
					name: '宝箱12',
					price: 120.01,
					img: '',
					count: 0
				}
			],
			selectedBox: null
		});

		onMounted(() => {});

		function btnBoxDetailClick(box: any) {
			state.selectedBox = box;
		}

		function changeBoxItemCount(box: any, type: number) {
			if (box.count + type < 0) {
				return;
			}
			box.count += type;
		}

		function staticsPrice() {
			return state.boxes
				.map((item) => {
					return item.price * item.count;
				})
				.reduce((a, b) => {
					return a + b;
				})
				.toFixed(2);
		}

		function onDialogClose() {
			emit('close', false);
		}

		function btnSubmit() {
			emit('close', false);
		}

		return {
			...toRefs(state),
			processImageUrl,
			btnBoxDetailClick,
			changeBoxItemCount,
			staticsPrice,
			props,
			onDialogClose,
			btnSubmit
		};
	},
	components: {
		OverlayScrollbarsComponent,
		BoxDetail
	},

	props: {}
});
</script>

<style scope lang="scss">
@import '@/views/battle/components/CreateBattle/ChooseBox.scss';
</style>
